<template>
	<div class="booklist">
		<div class="bookmenu">
			<el-menu>
				<el-menu-item :index="`${item.id}`" v-for="item in typebook" :key="item.id">
					<a @click="bookbtn(item.id)">{{item.name}}</a>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="bookxianqing">
			<li v-for="item in booklist" :key="item.id">
				<router-link :to="`/pc/booksdeta?&book_id=${item.id}`">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
				</router-link>
				<article>
					<router-link :to="`/pc/booksdeta?&book_id=${item.id}`">
						<h3>
							<strong>{{item.name}}</strong>
							<span>【出版社：{{item.maker}}】</span>
							<font>出版时间:{{item.tmake}}</font>
						</h3>
					</router-link>
					<h4>
						<label>作者：</label>
						<span>{{item.author}}</span>
					</h4>
					<strong style="color: red;">价格：{{item.price}}元</strong>
					<aside>
						<strong>简介：</strong>
						<p>{{item.info}}</p>
					</aside>
				</article>
				<el-button type="info" size="mini">
					<router-link :to="`/pc/booksdeta?&book_id=${item.id}`">
						<i class='el-icon-data-analysis'></i>
						详情
					</router-link>

				</el-button>
				<el-button style="background-color: #ff4e00; color: whitesmoke;" size="mini" @click="add2Cart(item.id)">
					<i class="el-icon-shopping-cart-full"></i>
					加入购物车
				</el-button>
			</li>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCbooklist',
		data() {
			return {
				//定义一个空的书籍类型数组
				typebook: [],
				//定义一个空的书籍id，用于获取首页测导航栏点击之后传过来的书籍id
				bookid: null,
				booklist: [],
				total: 0,
				start: 1,
				num: 3,
				onType: -1,
				searchStr: '',
				keywords: '', //搜索框的值
				key: '',
			}
		},
		methods: {
			getbooktype() {
				this.$get("/api/public/type/findAll2").then((res) => {
					let arr = res.data.data;
					console.log(this.typebook);
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].pid == 0) {
							this.typebook.push(arr[i]);
						}
						if (this.typebook.length > 8) break;
					}
				})
			},
			getbooklist() {
				this.start = 1;
				this.num = 6;
				console.log(this.onType);
				console.log(11111111111);
				this.$get("/api/public/findPageBook/" + (this.start) + "/" + this.num + "/" + this.onType)
					.then((res) => {
						this.booklist = res.data.data.books;
						this.total = res.data.data.total;
						console.log(1);
						console.log(this.booklist);
					})
			},
			bookbtn(id) {
				this.start = 1;
				this.num = 6;
				this.$get("/api/public/findPageBook/" + (this.start) + "/" + this.num + "/" + id)
					.then((res) => {
						this.booklist = res.data.data.books;
						this.total = res.data.data.total;
						console.log(1);
						console.log(this.booklist);
					})
			},
			add2Cart(bookid) {
				let token = localStorage.getItem('token');
				if (token == null) {
					alert('未登录！请先登录...');
					this.$router.push('/pc/login');
				} else {
					this.$get("/api/public/addCart/" + bookid).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.data.msg);
						} else {
							this.$message.error(res.data.msg);
						}
					})
				}

			},
			//搜索框获取搜索数据
			findBook(keys) {
				this.total = 0;
				this.curpage = 1;
				this.start = 1;
				this.onType = -1;
				// this.keywords = this.$route.query.key;
				this.$postKv("/api/public/book/findPageKey/" + this.start + "/" + this.num, {
					key: keys
				}).then(resp => {
					console.log(resp.data.data.books);
					this.booklist = resp.data.data.books;
					this.total = resp.data.data.total;
					console.log("total=" + this.total);
					console.log("搜索2" + this.booklist);
				})
			},
			//首次搜索，获取到搜索框传过来的值
			getsos() {
				let key = this.$route.query.key;
				this.findBook(key);
			},
			bookidif() {
				this.onType = this.$route.query.book_id;
				if (this.onType == null) {
					return;
				} else {
					this.getbooklist();
				}
			}
		},
		//加入监听器，监听搜索框跳转路由的参数是否一致，不一致则发起二次请求
		watch: {
			'$route.query.key': function(newVal, oldVal) {
				// 当路由查询参数 key 发生变化时，重新发起搜索请求  
				console.log('newVal' + newVal);
				console.log('oldVal' + oldVal);
				if (newVal !== oldVal && newVal) {
					this.key = newVal;
					this.findBook(this.key);
				}
			},
		},
		mounted() {
			this.bookidif();
			this.getbooktype();
			this.getsos();
		},
	}
</script>

<style scoped>
	.booklist {
		width: 100%;
		display: flex;
	}

	.booklist .bookmenu {
		width: 20%;
		border: 1px solid #d9deff;
		border-right: 1px solid #d9deff;
		height: 900px;
		/* 可以根据需要调整高度，这里使用视口高度 */
		overflow-y: auto;
		/* 允许垂直滚动 */
	}

	.bookmenu::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari and Opera */
	}

	.booklist .el-menu-item a {
		display: block;
		width: 100%;
		text-align: center;
		color: #aaaaff;
		text-decoration: none;
	}

	.booklist .bookxianqing {
		width: 80%;
	}

	.bookxianqing li {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px dashed #aaaaff;
		padding: 25px 0;
	}

	.bookxianqing li img {
		display: block;
		width: 220px;
	}

	.bookxianqing li article {
		width: 80%;
	}

	.bookxianqing .el-button a {
		color: #cecece;
	}

	.bookxianqing li article h3 {
		font-size: 22px;
		line-height: 40px;
		color: #5555ff;
	}

	.bookxianqing li article span {
		font-size: 14px;
		color: #cecece;
		font-weight: normal;
	}

	.bookxianqing li article h3 font {
		font-size: 12px;
		color: #cecece;
	}

	.bookxianqing article h4 {
		line-height: 40px;
		font-size: 14px;
	}

	.bookxianqing article h4 span {
		font-weight: normal;
	}

	.bookxianqing article aside {
		font-size: 14px;
		line-height: 30px;
	}

	.bookxianqing article aside p {
		height: 125px;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		overflow: hidden;
		/* 文本溢出的省略号 */
		/* text-overflow: ellipsis; */
		/* 强制不换行   中午状态 */
		/* white-space: break-spaces; */
	}

	.bookxianqing article footer {
		font-size: 12px;
		line-height: 35px;
		text-align: right;
		color: gray;
	}
</style>